<template>
  <div>
    <div ref="echartsContainer" style="height: 700px; width: 100%"></div>
  </div>
</template>

<script>
import Echarts from '@/utils/echarts'
import axios from 'axios'

export default {
  name: 'Radar',
  props: {
    data: {
      type: Array,
      default: null
    }
  },
  mounted () {
    var myChart = Echarts.init(this.$refs.echartsContainer)
    axios.get('/data.json').then((rawData) => {
      console.log(222222, rawData)
      myChart.setOption(
        {
          title: {
            text: 'Basic Radar Chart'
          },
          legend: {
            data: ['Allocated Budget', 'Actual Spending']
          },
          radar: {
            shape: 'polygon',
            indicator: [
              { name: 'Sales', max: 6500, min: 0 },
              { name: 'Administration', max: 16000, min: 0 },
              { name: 'Information Technology', max: 30000, min: 0 },
              { name: 'Customer Support', max: 38000, min: 0 },
              { name: 'Development', max: 52000, min: 0 },
              { name: 'Marketing', max: 25000, min: 0 }
            ]
          },
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000, 18000],
                  name: 'Allocated Budget'
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 21000],
                  name: 'Actual Spending'
                }
              ]
            }
          ]
        }
      )
    })
  }
}
</script>

<style scoped></style>
